<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>基本使用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
  <school></school>
  <student></student>
  <hello></hello>
</div>
<script>
  //创建school组件
  const school = Vue.extend({
    data() {
      return {
        schoolName: '尚硅谷',
        schoolAddress: '北京昌平',
      }
    },
    template: `
      <div>
      <h2>学校名称{{ schoolName }}</h2>
      <h2>学校地址{{ schoolAddress }}</h2>
      <button @click="showname">点我提示学校名</button>
      </div>`,
    methods: {
      showname() {
        alert(this.schoolName);
      }
    }
  });
  //创建student组件
  const student = Vue.extend({
    data() {
      return {
        studentName: '张三',
        age: '18'
      }
    },
    template: `
      <div>
      <h2>学生姓名{{ studentName }}</h2>
      <h2>学生年龄{{ age }}</h2>
      </div>`
  });
  //创建全局组件
  const hello = Vue.extend({
    template: `
      <div>
      <h2>{{ hello }}</h2>
      </div>
    `,
    data() {
      return {
        hello: '你好啊',
      }
    },
  });
  Vue.component('hello', hello);
  // /* 创建vm
  new Vue({
    el: "#root",
    //注册组件
    components: {
      school,
      student,
    }
  });
</script>

</body>
</html>
